import HandleBtn from '@/components/HandleBar/btn';
import Tabs, { TabsProps } from '@/components/Tabs';
import ElectricReport from '@/pages/Statistics/Electric/components/ElectricReport';
import { statisticElectricityControllerExportReport } from '@/services/ess/statisticElectricity';
import { downloadFetch } from '@/utils/downloadFile';
import { getDeviceCascader } from '@/utils/formatterTree';
import { useIntl } from '@umijs/max';
import { Radio, Space } from 'antd';
import dayjs from 'dayjs';
import React, { useEffect, useRef, useState } from 'react';
import DayChart from './components/DayChart';
import MonthChart from './components/MonthChart';
import YearChart from './components/YearChart';

type reportData = {
  codes: string[];
  date: string;
};
type DeviceInfoType = {
  stationCode: string;
  treeData: API.DeviceInfo[];
};
/**
 * 充放电量报表页面
 * @constructor
 */
const Electric: React.FC = () => {
  const intl = useIntl();
  const [radioValue, setRadioValue] = useState('chart');
  const electricRef = useRef(null);
  const [deviceInfos, setDeviceInfos] = useState<DeviceInfoType>({});
  const [tabVal, setTabVal] = useState('day');
  const [reportData, setReportData] = useState<reportData>({
    date: dayjs().format('YYYY-MM-DD'),
    codes: [],
  });

  const changeReportData = (e: reportData) => {
    setReportData(e);
  };
  const items: TabsProps['items'] = [
    {
      key: 'day',
      label: intl.formatMessage({ id: 'statistics.work.dayReport' }),
      children:
        radioValue === 'list' ? (
          <ElectricReport
            deviceInfos={deviceInfos}
            changeReportData={changeReportData}
            dateType={'day'}
          />
        ) : (
          <DayChart />
        ),
    },
    {
      key: 'month',
      label: intl.formatMessage({ id: 'statistics.work.monthReport' }),
      children:
        radioValue === 'list' ? (
          <ElectricReport
            deviceInfos={deviceInfos}
            changeReportData={changeReportData}
            dateType={'month'}
          />
        ) : (
          <MonthChart />
        ),
    },
    {
      key: 'year',
      label: intl.formatMessage({ id: 'statistics.work.yearReport' }),
      children:
        radioValue === 'list' ? (
          <ElectricReport
            deviceInfos={deviceInfos}
            changeReportData={changeReportData}
            dateType={'year'}
          />
        ) : (
          <YearChart />
        ),
    },
  ];
  type ToolBarProps = {
    tableRef: React.MutableRefObject<null>;
  };
  useEffect(() => {
    getDeviceCascader(false, undefined, ['BMS', 'AREA']).then((res) => {
      setDeviceInfos({
        stationCode: res?.data?.stationInfo?.stationCode,
        treeData: res.data,
        stationCode: res[0].stationId,
        treeData: res,
      });
      setReportData({
        date: dayjs().format('YYYY-MM-DD'),
        deviceCode: res[0].stationId,
      });
    });
  }, []);
  const exportReport = () => {
    const params = {
      unit: tabVal,
      ...reportData,
    };
    downloadFetch(statisticElectricityControllerExportReport, params);
  };
  const ToolBarRender: React.FC<ToolBarProps> = () => {
    return (
      <>
        <Space>
          <div>
            <Radio.Group
              className="global-group-radio-button"
              value={radioValue}
              onChange={(e) => {
                setRadioValue(e.target.value);
              }}
              buttonStyle="solid"
            >
              <Radio.Button value={'list'}>
                {intl.formatMessage({ id: 'statistics.common.list' })}
              </Radio.Button>
              <Radio.Button value={'chart'}>
                {intl.formatMessage({ id: 'statistics.common.chart' })}
              </Radio.Button>
            </Radio.Group>
          </div>
          {radioValue === 'list' && (
            <HandleBtn
              key="export"
              handleType="export"
              onClick={() => {
                exportReport();
              }}
            >
              {intl.formatMessage({ id: 'statistics.common.export' })}
            </HandleBtn>
          )}
        </Space>
      </>
    );
  };
  return (
    <>
      <Tabs
        hasHeaderBorder={false}
        // destroyInactiveTabPane={true}
        items={items}
        onChange={(e) => {
          setTabVal(e);
        }}
        tabBarExtraContent={<ToolBarRender tableRef={electricRef} />}
      ></Tabs>
    </>
  );
};

export default Electric;
